<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/header.css" />
		<link rel="stylesheet" type="text/css" href="../../css/chat.css" />
		<style>
			html,
			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
		</style>
	</head>

	<body contextmenu="return false;">

		<header class="mui-bar mui-bar-nav title" style="position: fixed;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left title-color"></a>
			<h1 class="mui-title title-color"><b id="chatting-nickname">缘 信</b></h1>
		</header>

		<div id="msg-outter" class="mui-content">
			<div id='msg'>
			</div>
		</div>
		
		<footer>
			<div class="footer-center">
				<textarea id='msg-text' type="text" class='input-text'></textarea>
			</div>
			<label for="" class="footer-right">
				<button type="button" class="mui-btn mui-btn-grey" id="send">发送</button>
			</label>
		</footer>
		
		<script src="../../js/mui.min.js"></script>
		<script type="application/javascript" src="../../js/app.js"></script>
		<script type="text/javascript">
			//创建命名空间，外部无法访问
//			(function($, doc) {
				var friendUserId;
				var friendNickname;
				var friendFaceImage;
				mui.plusReady(function(){
					//获取自己信息
					var me = app.getUserGlobalInfo();
					var chattingWebview = plus.webview.currentWebview();
					chattingWebview.setStyle({
						softinputMode:"adjustResize"
					});
					
					friendUserId = chattingWebview.friendUserId;
					friendNickname = chattingWebview.friendNickname;
					friendFaceImage = chattingWebview.friendFaceImage;
					
					initChatHistory();
					//修改标题为朋友昵称
					document.getElementById("chatting-nickname").innerHTML = friendNickname;
					
					resizeScreen();
					
					var msg_text = document.getElementById("msg-text");
					var send = document.getElementById("send");
					
					msg_text.addEventListener("input", function() {
						var msg_text_val = msg_text.value;
						if (msg_text_val.length > 0) {
							send.setAttribute("class","mui-btn-green");
						} else {
							send.setAttribute("class","mui-btn-gray");
						}
					});
					
					window.addEventListener("resize", function() {
						resizeScreen();
						document.getElementById("msg-outter").style.paddingBottom = "50px";
					});
					
					//发送消息判断网络
					send.addEventListener("tap", function() {
						var networkType = plus.networkinfo.getCurrentType();
						var msg = msg_text.value;
						
						if(networkType == 0 || networkType == 1) {
							app.showTip("网络未连接","error");
							return false;
						}
						
						if(msg.length < 1) {
							app.showTip("请输入内容","error");
							return false;
						}
						
						//渲染消息
						sendMsg(me.faceImage, msg);
						//清空文本框
						msg_text.value = "";
						send.setAttribute("class", "mui-btn-gray");
						
						//发送消息到后端
						var chatMsg = new app.ChatMsg(me.id, friendUserId, msg, null);
						var dataContent = new app.DataContent(app.CHAT, chatMsg, null);
						var wsWebview = plus.webview.getWebviewById("chatList.html");
						wsWebview.evalJS("CHAT.chat('"+ JSON.stringify(dataContent) +"')");		
						
						//保存我发送的消息到本地缓存
						console.log(me.id + "-" + friendUserId);
						app.saveUserChatHistory(me.id, friendUserId, msg, 1);
						
						//保存快照记录
						app.saveUserSnapshot(me.id, friendUserId, msg, true);
					});
				});
				
				//设置聊天窗口
				function resizeScreen() {
					var areaMsgList = document.getElementById("msg");
					areaMsgList.scrollTop = areaMsgList.scrollHeight + areaMsgList.offsetHeight;
				}
				
				//发送消息
				function sendMsg(faceImg, msg) {
					
					var msgHtml = '<div class="me_lists"><div class="header_img">' +
							'<img src="'+ app.fileUrl + faceImg +'" width="40px" height="40px" />' + 
							'</div>' +
							'<div class="msg-wrapper left">' +
							'<p class="msg-right-green word_style">'+ msg +'</p>' +
							'</div></div>';
					var msgList = document.getElementById("msg");
					msgList.insertAdjacentHTML("beforeend", msgHtml);
				}
				
				//接收消息
				function receiveMsg(msg) {
					var msgHtml = '<div class="friend_lists">' +
								  '<div class="header_img">' + 
								  '<img src="'+ app.fileUrl + friendFaceImage +'" width="40px" height="40px" />' + 
								  '</div>' + 
								  '<div class="msg-wrapper right">' +
								  '<p class="msg-left-white word_style">'+ msg +'</p>' +
								  '</div></div>';
					var msgList = document.getElementById("msg");
					msgList.insertAdjacentHTML("beforeend", msgHtml);
				}
//			}(mui, document));
			
			//初始化用户聊天记录
			function initChatHistory() {
				var msg_list = document.getElementById("msg");
				var me = app.getUserGlobalInfo();
				var myId = me.id;
				var myNickname = me.nickname;
				var myFaceImg = me.faceImage;
				
				var chatHistoryList = app.getUserChatHistory(myId, friendUserId);
				console.log(myId);
				console.log(friendUserId);
				var chatHistoryHtml = "";
				for (var i = 0; i< chatHistoryList.length; i++) {
					var singleMsg = chatHistoryList[i];
					if (singleMsg.flag == 1) {
						chatHistoryHtml += '<div class="me_lists"><div class="header_img">' +
							'<img src="'+ app.fileUrl + myFaceImg +'" width="40px" height="40px" />' + 
							'</div>' +
							'<div class="msg-wrapper left">' +
							'<p class="msg-right-green word_style" >'+ singleMsg.msg +'</p>' +
							'</div></div>';
					} else {
						chatHistoryHtml += '<div class="friend_lists">' +
								  '<div class="header_img">' + 
								  '<img src="'+ app.fileUrl + friendFaceImage +'" width="40px" height="40px" />' + 
								  '</div>' + 
								  '<div class="msg-wrapper right">' +
								  '<p class="msg-left-white word_style">'+ singleMsg.msg +'</p>' +
								  '</div></div>';
					}
				}
				msg_list.innerHTML = chatHistoryHtml;
			}
		</script>
	</body>

</html>